<template>
  <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>
  <!-- 遍历轮播图 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in imagesArr" :key="image.bannerid">
      <img :src="image.img" class="lunbo-item" />
    </van-swipe-item>
  </van-swipe>

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
  >
    <van-row :gutter="[20, 20]" class="list">
      <van-col
        span="12"
        v-for="item in listArr"
        :key="item.proid"
        class="list-item"
        @click="$router.push('/detail?proid=' + item.proid)"
      >
        <div class="van-ellipsis">{{ item.proname }}</div>
        <img :src="item.img1" alt="" />
        <div class="van-ellipsis">{{ item.desc }}</div>
        <div>价格:{{ item.originprice }}</div>
      </van-col>
    </van-row>
    <van-back-top right="3vw" bottom="8vh" />
  </van-list>

  <!-- 商品列表 
  <van-row :gutter="[20, 20]" class="list">
    <van-col
      span="12"
      v-for="item in listArr"
      :key="item.proid"
      class="list-item"
      @click="$router.push('/detail?proid=' + item.proid)"
    >
      <div class="van-ellipsis">{{ item.proname }}</div>
      <img :src="item.img1" alt="" />
      <div class="van-ellipsis">{{ item.desc }}</div>
      <div>价格:{{ item.originprice }}</div>
    </van-col>
  </van-row> -->
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getCartList } from '@/stores/huibiao'
import http from '@/utils/request'

let loading = ref(false)
let finished = ref(false)
let count = 1
let limitNum = 15
let itemsApi = ref('http://localhost:3001/api/pro/list')

// 滚动底部--就会触发
const onLoad = async () => {
  count++ // 页码加加
  console.log('滚动底部--就会触发')
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  //await 会等后面的promsie请求成功以后，才会往下周
  let r = await axios.get(itemsApi.value, { params: { count: count, limitNum } })
  console.log(r.data.data)
  //服务器返回的数据，里面还有一个data属性，是商品列表数据
  // 修改了ref响应式数据，页面就会更新
  // listArr.value = r.data.data;

  // *****服务器返回的数据push到数组中
  // list.value.push(list.value.length + 1);
  listArr.value.push(...r.data.data)
  // 加载状态结束
  loading.value = false
  // 数据全部加载完成
  // 如果一次返回的数据小于15 说明没有更多了
  if (r.data.data.length < limitNum) {
    finished.value = true
  }
}

//导航搜索跳转
let value = ref('')
let router = useRouter()
function onSearch() {
  console.log(value.value)
  router.push('/search?keyword=' + value.value)
}

// 获取轮播图数据
let imagesArr = ref([])
let BannerurlApi = ref('http://localhost:3001/api/banner/list')
async function LoadLunBoList() {
  let r = await http.get(BannerurlApi.value)
  // console.log(r.data.data)
  imagesArr.value = r.data.data
}
LoadLunBoList()

//获取商品分页列表
let listArr = ref([])

async function LoadItems() {
  let r = await axios.get(itemsApi.value, { params: { count, limitNum } })
  console.log(r.data.data)
  listArr.value = r.data.data
  getCartList()
}
LoadItems()
</script>

<style scoped>
.lunbo-item {
  width: 375px;
}
.list {
  width: 355px;
  margin: 0 auto;
}

.list-item img {
  width: 100%;
}
</style>
